<template>
	<div style="margin-top: 1.25rem;height: 150px;">
		<van-swipe :autoplay="3000">
			<van-swipe-item v-for="(image, index) in images" :key="index" >
				<!-- <img v-lazy="image" style="width: 100%;height: 100%;border-radius: 0.625rem;" /> -->
				<van-image
				  width="100%"
				  height="100%"
				  :lazy-load="true"
				  :radius="10"
				  :src="image"
				/>
			</van-swipe-item>
		</van-swipe>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {

		data() {
			return {
				images: [],
			};
		},
		computed: {
			...mapGetters([
				'fetchList'
			])
		},
		created() {
			let img = [
				'https://img01.yzcdn.cn/vant/apple-1.jpg',
				'https://img01.yzcdn.cn/vant/apple-2.jpg',
			]
			this.$nextTick(function() {
				this.$store.dispatch("user/vuexTest", '牛')
					.then(e => {
						console.log(e)
						this.images = img
					})
					.catch((error) => {
						console.log(error);
						// 如果没有数据就显示默认的数据
						this.images = img
					});
			})
		},
		methods: {

		}

	};
</script>

<style>
	.van-swipe .van-swipe-item {
		color: #fff;
		font-size: 20px;
		/* line-height: 150px; */
		text-align: center;
		background-color: #39a9ed;
		height: 150px;

	}

	.van-swipe {
		width: 95%;
		border-radius: 0.625rem;
		margin-left: 3%;
	}
</style>
